<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/goods' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>编辑商品</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form ref="form" :model="goods" label-width="80px">
			<el-form-item label="商品货号">
				<el-input  v-model="goods.item_number"></el-input>
			</el-form-item>
			<el-form-item label="商品款号">
				<el-input  v-model="goods.titlenumber"></el-input>
			</el-form-item>
			<el-form-item label="商品名称">
				<el-input  v-model="goods.title"></el-input>
			</el-form-item>
			<el-form-item label="商品价格">
				<el-input  v-model="goods.price"></el-input>
			</el-form-item>
			<el-form-item label="商品库存">
				<el-input  v-model="goods.stock"></el-input>
			</el-form-item>
			<el-form-item label="商品权重">
				<el-input  v-model="goods.sort_id"></el-input>
			</el-form-item>
			<el-form-item label="商品货重">
				<el-input  v-model="goods.weight"></el-input>
			</el-form-item>
			<el-form-item label="专利">
				<el-input  v-model="goods.patent"></el-input>
			</el-form-item>
			<el-form-item label="设计师">
				<el-input  v-model="goods.designer"></el-input>
			</el-form-item>
			<el-form-item label="长寸">
				<el-input v-model="goods.long_inch"></el-input>
			</el-form-item>
			<el-form-item label="规格">
				<el-input v-model="goods.spec"></el-input>
			</el-form-item>
			<el-form-item label="工艺级别">
				<el-input v-model="goods.process_level"></el-input>
			</el-form-item>
			<el-form-item label="石数">
				<el-input  v-model="goods.stone_number"></el-input>
			</el-form-item>
			<el-form-item label="石重">
				<el-input  v-model="goods.stone_weight"></el-input>
			</el-form-item>
			
			<el-form-item label="存货类别">
				<el-input v-model="goods.inventory_type"></el-input>
			</el-form-item>
			<el-form-item label="长度">
				<el-input  v-model="goods.length"></el-input>
			</el-form-item>
			<el-form-item label="主成色重">
				<el-input v-model="goods.m_color_weight"></el-input>
			</el-form-item>
			<el-form-item label="主石规格">
				<el-input v-model="goods.m_stone_spec"></el-input>
			</el-form-item>
			<el-form-item label="主石级别">
				<el-input  v-model="goods.m_stone_grade"></el-input>
			</el-form-item>
			<el-form-item label="主石重">
				<el-input  v-model="goods.m_stone_weight"></el-input>
			</el-form-item>
			<el-form-item label="主石数">
				<el-input v-model="goods.m_stone_number"></el-input>
			</el-form-item>
			<el-form-item label="主石形状">
				<el-input v-model="goods.m_stone_shape"></el-input>
			</el-form-item>
			<el-form-item label="主石色彩">
				<el-input  v-model="goods.m_stone_color"></el-input>
			</el-form-item>
			<el-form-item label="辅石重">
				<el-input  v-model="goods.a_stone_weight"></el-input>
			</el-form-item>
			<el-form-item label="辅石数">
				<el-input  v-model="goods.a_stone_number"></el-input>
			</el-form-item>
			<el-form-item label="金重">
				<el-input  v-model="goods.golden_weight"></el-input>
			</el-form-item>
			

			<!-- <el-form-item label="商品主图">
				<el-upload
				  class="upload-demo"
				  action="/api/goods/upload"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :file-list="goods.detailPic"
				  :on-success="successEvent"
				  list-type="picture">
				  <el-button size="small" type="primary">点击上传</el-button>
				  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
				</el-upload>
		  	</el-form-item> -->
		  	
			<el-form-item label="商品图片">
				<el-upload
				  action="/api/goods/uploadImage"
				  list-type="picture-card"
				  :on-preview="handlePictureCardPreview"
				  :on-remove="handleRemove"
				  :limit="5"
				  :file-list="img_url_1"
				  :on-success="successEvent">
				  <i class="el-icon-plus"></i>
				</el-upload>
			<!--	<el-dialog :visible.sync="dialogVisible">
				  <img width="100%" src="http://yiding.com:8081/uploads/BSC0011751.png" alt="">
				</el-dialog> -->
			</el-form-item>
			
			<!-- <el-form-item label="定时上架">
		    	<el-date-picker
			      	v-model="goods.date"
			      	type="datetime"
			      	placeholder="选择日期时间">
			    </el-date-picker>
		  	</el-form-item> -->

			<!-- <el-form-item label="商品类目">
			    <el-select v-model="goods.cateid" placeholder="请选择活动区域">
			      	<el-option label="区域一" value="shanghai"></el-option>
			      	<el-option label="区域二" value="beijing"></el-option>
			    </el-select>
		  	</el-form-item> -->

			<el-form-item label="商品属性">
				<el-row>
					<el-col :span="4" v-for="item in attrs" :key="item.id"  >
						<span>{{item.cate_name}}：</span>
						<el-select v-model="item.attr_name" placeholder="请选择" value-key="item.attr_id">
							<el-option v-for="vv in item.attrList" 
							:key="vv.attr_id"
							:value="vv.attr_name">
							</el-option>
						</el-select>
					</el-col>
				</el-row>
				<!-- <el-button v-for="item in cateList" :key="item.id" type="danger" @click="selectAttr(item.id)">{{ item.cate_name }}</el-button> -->
			</el-form-item>

			<!-- <el-form-item label="是否预定">
		    	<el-switch v-model="goods.status"></el-switch>
		  	</el-form-item> -->

			<el-form-item label="详情内容">
				<!-- <el-input type="textarea" v-model="goods.detailText"></el-input> -->
				<div id="websiteEditorElem"></div>
			</el-form-item>
			
			<el-form-item>
				<el-button type="primary" @click="editGoods">上传商品</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script type="text/javascript">
import E from 'wangeditor';
import 'wangeditor/release/wangEditor.min.css';
export default {
	data() {
		return {
			max: 20,
			goods: {
				title: '',
				status: true,
				detailText: '',
				detailPic: [],
				price: 0,
				stock: 0,
				_token: '',
			//	selectAttrList: [],
				date: '',
				item_number:'',
				titlenumber:'',
				patent:'',
				designer:'',
				colour:'',
				long_inch:'',
				stone_number:0,
				process_level:'',
				spec:'',
				stone_weight:0,
				length:0,
				inventory_type:'',
				m_color_weight:0,
				m_stone_spec:'',
				m_stone_grade:'',
				m_stone_number:0,
				m_stone_shape:'',
				m_stone_weight:0,
				m_stone_color:'',
				a_stone_weight:0,
				a_stone_number:0,
				sort_id:0,
				weight:0,
				golden_weight:''
				
			},
			attr_name:'',
			cateList: [],
			dialogVisible: false,
			selectAttrList: [],
			phoneEditor: null,
			attrs:[],
			img_url_1:[],
			dialogImageUrl: '',
			detailPic:[]
		};
	},
	mounted() {
		this.phoneEditor = new E('#websiteEditorElem');
		this.phoneEditor.onchange = () => {
			this.goods.detailText = this.$txt.html();
			console.log(this.goods.detailText, '有内容来了啊');
		};
		this.phoneEditor.customConfig.zIndex = 100;
		this.phoneEditor.customConfig.uploadImgServer = '/api/goods/upload?type=edit';
		this.phoneEditor.customConfig.uploadFileName = 'file';
		this.phoneEditor.create();
	},
	created() {
		this.goods._token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
		this.getCates();
		this.getGood();
	},
	methods: {
		getGood(){
				axios.get('/api/good/goodedit/'+this.$route.params.id)
					.then(res => {
					console.log(res,res.data,10000000);
						var data = res.data.result;
						this.goods.id = data.id;
						this.goods.item_number = data.item_number;
						this.goods.titlenumber = data.titlenumber;
						this.goods.stock = data.stock;
						this.goods.price = data.price;
						this.goods.weight = data.weight;
						this.goods.style = data.style;
						this.goods.design = data.design;
						this.goods.patent = data.patent;
						this.goods.designer = data.designer;
						this.goods.subject = data.subject;
						this.goods.colour = data.colour;
						this.goods.long_inch = data.long_inch;
						this.goods.stone_number = data.stone_number;
						this.goods.process_level = data.process_level;
						this.goods.spec = data.spec;
						this.goods.stone_weight = data.stone_weight;
						this.goods.length = data.length;
						this.goods.inventory_type = data.inventory_type;
						this.goods.m_color_weight = data.m_color_weight;
						this.goods.m_stone_cate = data.m_stone_cate;
						this.goods.m_stone_spec = data.m_stone_spec;
						this.goods.m_stone_grade = data.m_stone_grade;
						this.goods.m_stone_weight = data.m_stone_weight;
						this.goods.m_stone_number = data.m_stone_number;
						this.goods.m_stone_shape = data.m_stone_shape;
						this.goods.m_stone_color = data.m_stone_color;
						this.goods.a_stone_weight = data.a_stone_weight;
						this.goods.a_stone_number = data.a_stone_number;
						this.goods.golden_weight = data.golden_weight;
						this.goods.sort_id = data.sort_id;
						this.attrs = data.attrs;
						this.img_url_1 = data.img_url_1;
						this.img_url = data.img_url;
						this.goods.title = data.title;
						this.goods.status = data.status == 1 ? false : true;
						this.goods.detailText = data.detail_text;
						
						this.phoneEditor.txt.html(data.detail_text);
						console.log(this.phoneEditor,"富文本");
					})
					.catch(error => {

					})
				
			},
		
		getCates() {
			axios.get('/api/cates').then(result => {
				this.cateList = result.data.result;
			});
		},
		editGoods() {
			this.goods.detailText = this.phoneEditor.txt.html();
		//console.log(this.goods,99999999);
			axios
				.post('/api/good/edit', {goods:this.goods,attrs:this.attrs})
				.then(result => {
					console.log(result);
					this.goods.selectAttrList = [];
					this.$message({
						type: 'success',
						message: '上传成功'
					});
					this.$router.push({ path: '/goods' });
				})
				.catch(error => {});
		},
		selectAttr(id) {
			this.dialogVisible = true;
			axios.get('/api/attrs?id=' + id).then(result => {
				this.attrList = this.handleAttrData(result.data.result);
			});
		},
		handleAttrData(data) {
			var temp = [];
			for (var i = 0; i < data.length; i++) {
				temp.push({ label: data[i].attr_name, key: '{"attr_id":' + data[i].id + ',"cate_id":' + data[i].cate_id + '}' });
			}
			return temp;
		},
		handleRemove(file, fileList) {
			axios.post('/api/goods/delImage',file)
					.then(result => {
						this.img_url_1 = [];
					})
					.catch(error => {

					});
			console.log(file, fileList);
		},
		handlePreview(file) {
			console.log(this.goods.detailPic);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`);
		},
		successEvent(file){
		    	this.img_url_1.push({name:file.result,url:file.result});
		    },
		handleClose(obj) {
			console.log(obj);
			this.dialogVisible = false;
		},
		filterMethod(query, item) {
			return item;
		}
	}
};
</script>

<style type="text/css">
input[type='file'] {
	display: none;
}
/* 商品图片 */
.time {
	font-size: 13px;
	color: #999;
}

.bottom {
	margin-top: 13px;
	line-height: 12px;
}

.button {
	padding: 0;
	float: right;
}

.image {
	width: 100%;
	display: block;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: '';
}

.clearfix:after {
	clear: both;
}
/* end */
.el-main{
/* 	border-left: 1px solid #ccc;
    margin: 0;
    padding-top: 20px;
    padding-left: 20px; */
}
.el-select .el-input {
    width: 100px !important;
}
</style>
